<template>
  <div class="page-container">
    <div class="page-row">
            <el-input style="width: 180px; height: 26px; margin-right: 28px;" v-model="queryParam.memberPhone" placeholder="请输入手机号" :suffix-icon="Search" @keydown.enter.prevent="bindSearch"></el-input>
            <el-select @change="bindSearch" size="small" style="margin: 0 28px;" v-model="queryParam.type" clearable placeholder="请选择类型">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select @change="bindSearch" size="small" v-model="queryParam.status" clearable placeholder="请选择状态">
                <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <el-table :data="list" style="width: 100%; margin-top: 20px;" >
            <el-table-column prop="memberName" label="申请人" width="150" />
            <el-table-column prop="memberPhone" label="手机号" width="120" />
            <el-table-column prop="parentName" label="推荐人" />
            <el-table-column prop="type" label="申请类型" width="150">
                <template #default="scope">
                    <el-tag class="ml-2" type="success">{{saleType[scope.row.type]}}</el-tag>
                </template>
            </el-table-column>            
            <el-table-column prop="createTime" label="申请时间" width="180"/>
            <el-table-column prop="userName" label="审批人" />
            <el-table-column prop="status" label="审批状态" >
                <template #default="scope">
                    <el-tag class="ml-2" :type="saleTag[scope.row.status]">{{saleStatus[scope.row.status]}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" width="180"/>
            <el-table-column prop="note" label="备注" />
            <el-table-column fixed="right" width="200px" label="操作">
                <template #default="scope" >
                    <el-button v-if="scope.row.status == '0'" size="small" link type="primary" @click="passuser(scope.row)" >通过</el-button>
                    <el-button v-if="scope.row.status == '0'" size="small" link type="primary" @click="showNotMpdal(scope.row)" >驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="queryParam.current"
              v-model:page-size="queryParam.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="false"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
  </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { useSaleApi } from '/@/api/pms/sale/index'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'approve',
    setup(props) {
        const saleApi = useSaleApi()
        const state =  reactive({
            list: [],
            typeList: [
                { value: 1, label: '推广员' },
                { value: 1, label: '推广员' },
                { value: 1, label: '推广员' },
            ],
            statusList: [
                { value: 0, label: '待审批'},
                { value: 1, label: '通过'},
                { value: 2, label: '驳回'},
            ],
            saleType: {
                0: '推广员',
                1: '一级分销商',
                2: '二级分销商'
            },
            saleTag: {
                '0': 'warning',
                '1': 'success',
                '2': 'danger'
            },
            saleStatus: {
                '0': '待审批',
                '1': '通过',
                '2': '驳回'
            },
            total: 0,
            queryParam: {
                current: 1,
                size: 10,
                memberPhone: '', // 手机号
                type: null, // 申请类型
                status: null, // 状态
            }
        })
        onMounted(() => {
            getList()
        })
        // 获取列表数据
        const getList = () => {
            api.applyFor(state.queryParam).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 显示同意通知
        const passuser = row => {
            ElMessageBox.confirm(
                '是否同意"' + row.memberName + '"的审批',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                editApprove(row, 1)
            }).catch()
        }
        // 通过
        const editApprove = (row, status) => {
            saleApi.editApprove({
                id: row.id,
                status: status
            }).then(res => {
                getList()
                ElMessage.success("操作成功")
            })
        }
        // 显示驳回弹窗
        const showNotMpdal = row =>{
            ElMessageBox.confirm(
                '是否驳回"' + row.memberName + '"的审批',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                editApprove(row, 2)
            }).catch()
        }
        // 搜索
        const bindSearch = () => {
            getList()
        }
        // 分页
        const handleSizeChange = e => {
            state.queryParam.size = e
            getList()
        }
        // 分页
        const handleCurrentChange = e => {
            state.queryParam.current = e
            getList()
        }
        return {
            ...toRefs(state),
            Plus,
            Search,
            getList,
            bindSearch,
            handleSizeChange,
            handleCurrentChange,
            passuser,
            showNotMpdal,
            editApprove,
        }
    }
}
</script>

<style scoped lang="scss">

</style>